<!--
 * @Date: 2023-02-20 15:47:43
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-02-24 15:38:22
 * @FilePath: \sososn-web-new\src\components\popupBox.vue
-->
<template>
  <div class="popup-box">
    <div class="popup-top flex-col items-center" @click="toKeFu">
      <div class="icon-box">
        <img :src="$getAssetsImages('kefu.png')" alt="客服" />
      </div>
      <div class="text-box">智能客服</div>
    </div>
    <div class="popup-mid round-box justify-center items-center" @click="isShowService = true">
      <div class="icon-box">
        <el-image :src="$getAssetsImages('qr1.png')" class="img1-mid" />
        <el-image :src="$getAssetsImages('qr2.png')" class="img2-mid" />
      </div>
    </div>
    <div class="popup-bottom round-box justify-center items-center" @click="toTop">
      <div class="icon-box">
        <el-image :src="$getAssetsImages('toTop1.png')" class="img1-bot" />
        <el-image :src="$getAssetsImages('toTop2.png')" class="img2-bot" />
      </div>
    </div>
  </div>
  <!-- 客服微信 -->
  <div v-if="isShowService" class="center-box flex-col items-center">
    <p class="text-title">您好，我是您的专属产品顾问</p>
    <p class="text_1">扫码添加我的微信，免费体验系统</p>
    <p class="text_2">(工作日09:00 - 18:00)</p>
    <el-image :src="$getAssetsImages('kefu-weixin.png')" class="image" />
    <el-image
      :src="$getAssetsImages('close.png')"
      class="image-close"
      @click="isShowService = false"
    />
  </div>
  <!-- 蒙层 -->
  <div v-if="isShowService" class="cc-mask"></div>
</template>

<script setup>
const isShowService = ref(false)

const toKeFu = () => {
  window.open('/#/chatService')
}
const emit = defineEmits(['toTop'])
const toTop = () => {
  emit('toTop')
}
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
@use './scss/popupBox.scss';
</style>
